// 编写相关图表

// 饼图的生成函数
function pieChart(data) {
  // 实例化图表
  const myChart = echarts.init(document.querySelector(".pie")) // 得到一个实例
  let option = {
    //   标题属性
    title: {
      text: "籍贯", // 标题文本
      textStyle: {
        color: "#6d767e",
      },
    },
    // 提示框
    tooltip: {
      // 湖南省 变成活的
      // 80 也得变成活的
      // 40%也得变成活的
      //   formatter: "各地人员分布<br /> 湖南省 <strong>80</strong>人占比 40%",
      formatter: "{a} <br />{b} <strong>{c}</strong>人  {d}%",
      //   a 图中的name
      // b指的是每一个数据选项的name
      // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    },
    series: [
      {
        name: "各地人员分布",
        type: "pie", // 饼图
        radius: ["20%", "80%"],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 4, // 扇形的圆角
        },
        data,
        // data: [
        //   { value: 40, name: "河北省" },
        //   { value: 38, name: "河南省" },
        //   { value: 32, name: "北京市" },
        //   { value: 30, name: "天津市" },
        //   { value: 28, name: "山西省" },
        //   { value: 26, name: "山东省" },
        //   { value: 22, name: "辽宁省" },
        //   { value: 18, name: "吉林省" },
        //   { value: 1, name: "海南省" },
        // ],
      },
    ],
  }
  myChart.setOption(option) // 设置选项
}

// 生成折线图表
function lineChart(data) {
  const { studentName, salary, trueSalary } = data
  const myChart = echarts.init(document.querySelector(".line"))
  let option = {
    title: {
      text: "薪资",
    },
    // 表示图例
    legend: {},
    xAxis: {
      type: "category",
      // x轴需要所有学生的姓名
      data: studentName,
      // data: ["张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥"],
    },
    yAxis: {
      type: "value",
    },
    dataZoom: [
      {
        type: "slider",
        end: 20, // 设置百分之50
      },
    ],
    series: [
      {
        name: "期望薪资",
        // 所有学生的期望薪资
        data: salary,
        // data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000],
        type: "line",
        smooth: true,
      },
      {
        name: "实际薪资",
        // 所有学生的实际薪资
        data: trueSalary,
        // data: [12000, 17000, 15000, 9600, 8300, 12000, 17000, 15000, 9600, 8300, 12000, 17000, 15000, 9600, 8300, 12000, 17000, 15000, 9600, 8300],
        type: "line",
        smooth: true,
      },
    ],
  }
  myChart.setOption(option) // 设置选项
}

// 生成柱状图
function barChart(data, batch) {
  const { group, avgScore, lt60, gt60, gt80 } = data
  const myChart = echarts.init(document.querySelector(".barChart"))
  let option = {
    title: {
      text: `第${batch}次的考试成绩`,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    // 此时会显示图例
    legend: {},
    xAxis: [
      {
        type: "category",
        // data: ["1组", "2组", "3组", "4组", "5组", "6组", "7组", "8组"],
        data: group,
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    // 设置y轴
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 10, // 设置步长
        axisLabel: {
          formatter: "{value} 分",
        },
      },
      {
        type: "value",
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: "{value} 人",
        },
      },
    ],
    series: [
      {
        name: "平均分",
        type: "bar",
        barWidth: 20, // 这是柱子的宽度
        data: avgScore,
        // data: [50, 60, 67, 78, 50, 68, 89, 76, 56, 34], // 平均分 0-100的数据 要使用y轴左侧的标准
      },
      {
        name: "低于60分的人数",
        type: "bar",
        barWidth: 20, // 这是柱子的宽度
        yAxisIndex: 1, // 使用右侧的基准 因为它是人数 0 -10
        data: lt60,
        // data: [2, 3, 4, 7, 5, 6, 8, 6, 6, 4], // 人数 低于60分有多少个人 0 - 10
      },
      {
        name: "60分-80分的人数",
        type: "bar",
        yAxisIndex: 1, // 使用右侧的基准 因为它是人数 0 -10
        barWidth: 20, // 这是柱子的宽度
        data: gt60,
        // data: [2, 3, 4, 7, 5, 6, 8, 6, 6, 4],
      },
      {
        name: "80分以上的人数",
        type: "bar",
        yAxisIndex: 1, // 使用右侧的基准 因为它是人数 0 -10
        barWidth: 20, // 这是柱子的宽度
        data: gt80,
        // data: [2, 3, 4, 7, 5, 6, 8, 6, 6, 4],
      },
    ],
  } // 配置信息
  myChart.setOption(option)
}

// 地图代码

function mapChart() {
  let myChart = echarts.init(document.querySelector(".map"))
  var chinaGeoCoordMap = {
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891],
  }
  var chinaDatas = [
    [
      {
        name: "黑龙江",
        value: 0,
      },
    ],
    [
      {
        name: "内蒙古",
        value: 0,
      },
    ],
    [
      {
        name: "吉林",
        value: 0,
      },
    ],
    [
      {
        name: "辽宁",
        value: 0,
      },
    ],
    [
      {
        name: "河北",
        value: 0,
      },
    ],
    [
      {
        name: "天津",
        value: 0,
      },
    ],
    [
      {
        name: "山西",
        value: 0,
      },
    ],
    [
      {
        name: "陕西",
        value: 0,
      },
    ],
    [
      {
        name: "甘肃",
        value: 0,
      },
    ],
    [
      {
        name: "宁夏",
        value: 0,
      },
    ],
    [
      {
        name: "青海",
        value: 0,
      },
    ],
    [
      {
        name: "新疆",
        value: 0,
      },
    ],
    [
      {
        name: "西藏",
        value: 0,
      },
    ],
    [
      {
        name: "四川",
        value: 0,
      },
    ],
    [
      {
        name: "重庆",
        value: 0,
      },
    ],
    [
      {
        name: "山东",
        value: 0,
      },
    ],
    [
      {
        name: "河南",
        value: 0,
      },
    ],
    [
      {
        name: "江苏",
        value: 0,
      },
    ],
    [
      {
        name: "安徽",
        value: 0,
      },
    ],
    [
      {
        name: "湖北",
        value: 0,
      },
    ],
    [
      {
        name: "浙江",
        value: 0,
      },
    ],
    [
      {
        name: "福建",
        value: 0,
      },
    ],
    [
      {
        name: "江西",
        value: 0,
      },
    ],
    [
      {
        name: "湖南",
        value: 0,
      },
    ],
    [
      {
        name: "贵州",
        value: 0,
      },
    ],
    [
      {
        name: "广西",
        value: 0,
      },
    ],
    [
      {
        name: "海南",
        value: 0,
      },
    ],
    [
      {
        name: "北京市",
        value: 1,
      },
    ],
  ]

  var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i]
      var fromCoord = chinaGeoCoordMap[dataItem[0].name]
      var toCoord = [116.4551, 40.2539]
      if (fromCoord && toCoord) {
        res.push([
          {
            coord: fromCoord,
            value: dataItem[0].value,
          },
          {
            coord: toCoord,
          },
        ])
      }
    }
    return res
  }
  var series = []
  ;[["北京市", chinaDatas]].forEach(function (item, i) {
    // console.log(item)
    series.push(
      {
        type: "lines",
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
          // symbol: 'arrow', // 箭头图标
          // symbol: 'image://http://www.itcbc.com:3006/formdata/laoduan.jpg',
          // symbol: 'image://',
          symbol:
            "path://M644.427078 956.858834c-1.959631 0-3.929496-0.322341-5.829775-0.981351l-93.384877-32.326243c-9.302877-3.219321-14.233166-13.371542-11.012821-22.674419 3.219321-9.3039 13.372565-14.233166 22.674419-11.012821l69.729108 24.136723 0-27.361161-56.793494-51.671846c-4.507664-4.100388-6.607488-10.218736-5.568832-16.223496 1.481747-8.56405 2.202155-15.871479 2.202155-22.339798 0-0.37146 0.01228-0.74292 0.034792-1.113357l10.960633-175.081551c0.372483-5.954619 3.700275-11.328 8.863878-14.31503 5.166673-2.989077 11.482519-3.192715 16.82827-0.548492l311.807538 154.23271 0-64.716954L589.587076 410.05312c-3.866051-3.385097-6.083555-8.273431-6.083555-13.411451L583.503521 181.125197c0-22.372543-9.601682-51.562353-24.461111-74.362638-15.458063-23.719214-34.08326-37.323047-51.099818-37.323047-17.016559 0-35.642778 13.602809-51.099818 37.322024-14.859429 22.800285-24.460088 51.990095-24.460088 74.362638l0 215.515449c0 5.13802-2.217505 10.027377-6.083555 13.411451L100.941993 694.860724l0 64.501036 306.089303-153.963581c5.323239-2.677992 11.632945-2.517333 16.813944 0.425695 5.180999 2.943029 8.5487 8.280594 8.975419 14.223956l13.57825 189.452863c0.030699 0.423649 0.045025 0.849344 0.045025 1.274016 0 3.140527 0.372483 6.514367 0.76748 10.085706l0.146333 1.332345c0.618077 5.675256-1.51961 11.304464-5.749958 15.138792l-54.42761 49.327452 0 27.220968L443.965487 893.933689c16.090467-6.587022 51.374064-9.872858 73.997318 23.608697 5.511527 8.156774 3.367701 19.237133-4.790096 24.74866-8.156774 5.509481-19.237133 3.367701-24.74866-4.790096-5.106298-7.557116-11.355629-11.511171-19.105127-12.087293-6.149047-0.459464-11.268648 1.313925-12.056594 1.604544-0.410346 0.186242-0.512676 0.209778-0.997724 0.38067l-81.002872 28.452006c-5.453199 1.914606-11.496845 1.067308-16.213263-2.27481-4.715395-3.342118-7.518231-8.762571-7.518231-14.543228l0-60.274782c0-5.031597 2.12643-9.827833 5.854335-13.20679l53.638641-48.613184c-0.12382-1.769296-0.209778-3.598968-0.226151-5.482875l-11.624758-162.198126L91.127464 804.205085c-5.52483 2.7793-12.096503 2.494821-17.362436-0.750083s-8.471952-8.987698-8.471952-15.173584l0-101.504812c0-5.13802 2.217505-10.027377 6.084579-13.411451l325.355089-284.808628L396.732743 181.125197c0-29.250184 11.588943-65.203024 30.242791-93.826945 22.487154-34.504862 51.241035-53.507658 80.967056-53.507658 29.723975 0 58.477856 19.002796 80.966033 53.507658 18.654872 28.624944 30.244838 64.576761 30.244838 93.826945l0 207.430306 325.350996 284.808628c3.866051 3.385097 6.083555 8.273431 6.083555 13.411451l0 101.504812c0 6.163373-3.184529 11.890818-8.420787 15.142885-5.234211 3.252067-11.780301 3.567245-17.306154 0.833995L611.344612 649.180336l-9.253758 147.804301c-0.025583 5.622044-0.436952 11.579733-1.24741 18.022469l55.579853 50.567699c3.712555 3.377934 5.828752 8.16496 5.828752 13.184277l0 60.274782c0 5.76633-2.789533 11.175527-7.485485 14.519692C651.707902 955.73115 648.085398 956.858834 644.427078 956.858834z",
          symbolSize: 10, //图标大小
          color: "#ee6666", // 线上的箭头颜色
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: 0.3, //尾迹线条曲直度
          },
        },
        data: convertData(item[1]),
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name
            },
            fontSize: 13,
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: function (val) {
          return 5 + val[2] * 5 //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: "#f00",
          },
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
          }
        }),
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: "stroke",
          scale: 4,
        },
        label: {
          normal: {
            show: true,
            position: "right",
            //offset:[5, 0],
            color: "#0f0",
            formatter: "{b}",
            textStyle: {
              color: "#0f0",
            },
          },
          emphasis: {
            show: true,
            color: "#f60",
          },
        },
        symbol: "pin",
        symbolSize: 50,
        data: [
          {
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          },
        ],
      }
    )
  })

  let option = {
    backgroundColor: "#13297B",

    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(166, 200, 76, 0.82)",
      borderColor: "#FFFFCC",
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: "z-index:100",
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = ""
        var name = params.name
        var value = params.value[params.seriesIndex + 1]
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value
        return res
      },
    },
    backgroundColor: "#fff",
    title: {
      text: "来京路线",
      textStyle: {
        color: "#6d767e",
      },
    },
    // 视觉映射组件
    // visualMap: {
    //   // 图例值控制
    //   min: 0,
    //   max: 1,
    //   show: true, // 不让组件显示
    //   calculable: true,
    //   color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
    //   textStyle: {
    //     color: "#fff",
    //   },
    // },
    geo: {
      map: "china",
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: "#dfe5f2", //地图背景色
          borderColor: "#516a89", // 省市边界线00fcff 516a89
          borderWidth: 1,
        },
        emphasis: {
          color: "rgba(37, 43, 61, .5)", // 悬浮背景
        },
      },
    },
    series: series, // 地图的框架之上  会有一些数据
  }

  myChart.setOption(option)
}

// 调用饼图
// pieChart()

// 生成折线图表
// lineChart()

// 生成柱状图
// barChart()

// 生成地图

mapChart()

// 发起请求

axios.get("/student/overview").then((result) => {
  const {
    data: { total, avgSalary, avgAge, proportion },
  } = result
  // 显示在页面上
  $(".avgSalary").text(avgSalary)
  $(".avgAge").text(avgAge)
  $(".total").text(total)
  $(".proportion").text(proportion)
})

// 注册三个点的电极板事件
$(".bar .btn").on("click", function () {
  // 监听点击事件
  $("#batch").show() // 显示成绩
})

// 注册 每一次成绩的点击事件
$("#batch li").on("click", function () {
  // 需要知道 点击的是第几个
  // jq可以帮助我们获取当前点击的索引
  let batch = $(this).index() + 1 // 获取的是第几次的成绩
  axios({
    url: "/score/batch",
    params: {
      batch,
    },
  }).then((result) => {
    barChart(result.data, batch) // 可以渲染柱状图数据
  })
})

// 默认获取一次的考试成绩-默认触发一下 第一个li的点击事件
$("#batch li").eq(0).trigger("click") // 默认主动触发第一次的点击事件

// 获取学生的数据接口

axios({
  url: "/student/list",
}).then((result) => {
  // 获取的所有的学生的数据
  console.log(result.data)
  // 需要生成三个数据 学生姓名数组 学生期望薪资数组 学生实际薪资数组
  const studentName = []
  const salary = []
  const trueSalary = []
  // result.data已经是所有的的学生数据了
  const pieData = []
  // [{ name: '黑龙江', value: 10  }, { name: '辽宁', value: 2  }]
  result.data.forEach((item) => {
    studentName.push(item.name) // 姓名
    salary.push(item.salary) // 期望薪资
    trueSalary.push(item.truesalary) // 期望薪资

    // 分析出 这学生来自哪 黑龙江 => 黑龙江 + 1
    // 首先得判断 当前循环的这个学生 { 张三, 海南 } 如果有海南 + 1 如果没有 加上海南的数据
    // 从一个数组中-找出是否有属性 name === item.province
    let temp = pieData.find((obj) => obj.name === item.province) // 找这个数据
    if (temp) {
      // 如果有说明 已经在数组里了
      temp.value++ // 将找到的省份的数据+1
    } else {
      // 如果没有 加进入
      pieData.push({ name: item.province, value: 1 })
    }
  })
  // 得到一个饼图数据

  lineChart({ studentName, salary, trueSalary }) // 直接传入一个对象

  pieChart(pieData) // 生成饼图
})

// messahe
